<template>
  <div>
    <div class="back" @click="toOrder">
      <i class="el-icon-arrow-left"></i>评价
    </div>
    <div class="box3">
      <h1>您对骑手满意吗？</h1>
      <div class="driver">
      <div class="image">
        <img src="../../../static/image/moto.png">
      </div>
      <div class="info">
        <p>天字第一号骑手</p>
        <i class="el-icon-arrow-right"></i>
        <span>订单已送达</span>
        <h6>送达时间：2019-10-10 18:10:04</h6>
      </div>
    </div>
      <div class="block">
        <el-rate
          v-model="value"
          show-text>
        </el-rate>
      </div>
    </div>
    <div class="seller">
        <h1>您对商家/菜品满意吗？</h1>
        <div class="shoper">
          <img src="https://fuss10.elemecdn.com/1/72/3c54d8b5a9b582555bc9e97430acfpng.png?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/">
          <span>米香食坊总店</span>
        </div>
        <div class="oll" @click="showMassage">
          <el-rate
            v-model="value1"
            :colors="colors"
            show-text
          >
          </el-rate>
        </div>
        <div class="more" v-show='flag'>
          <div class="score2">
            <div class="flavour">
              口味 <el-rate v-model="value2" show-text></el-rate>
            </div>
            <div @click="submit1">
              包装 <el-rate v-model="value3" show-text ></el-rate>
            </div>
          </div>
          <div class="input-info">
          <textarea class="comment" v-model="input" placeholder="口味赞，包装好，推荐给大家"></textarea>
            <div class="input-img">
              <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview">
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="80px" height="80px" :src="dialogImageUrl" alt="">
              </el-dialog>
            </div>
          </div>
        </div>
    </div>
    <div class="submit" @click="submit" style="background-color:#cccccc" ref="do">请对骑手进行评价</div>
  </div>
</template>
<script>
  export default {
    name: 'estimate',
    data () {
      return {
        value: null,
        value1: null,
        value2: null,
        value3: null,
        input: '',
        iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'],
        colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
        flag: false,
        dialogImageUrl: '',
        dialogVisible: false,
        color: 'green'
      }
    },
    methods: {
      toOrder () {
        if (window.confirm('是否退出评价？')) {
          this.$router.push('/order')
        }
      },
      showMassage () {
        this.flag = true
      },
      submit () {
        if (this.value != null && this.value1 != null && this.value2 != null && this.value3 != null) {
          this.$refs.do.style.backgroundColor = this.color
          this.$router.push('/')
          this.$toast('感谢您的评价~')
        } else {
          this.$toast.center('你还有没有评价的项哦~')
        }
      },
      submit1 () {
        if (this.value != null && this.value1 != null && this.value2 != null && this.value3 != null) {
          this.$refs.do.style.backgroundColor = this.color
        }
      },
      handleRemove (file, fileList) {
        console.log(file, fileList)
      },
      handlePictureCardPreview (file) {
        this.dialogImageUrl = file.url
      }
    }
  }
</script>
<style lang="stylus" type="text/stylus" >
  @import '../../common/stylus/mixin.styl'
  .back
    width :100%
    height :40px
    background-color :blue
    line-height :40px
    color :white
    padding-left :10px
    font-size :14px
    i
      margin-right :20px
  .box3
    width :95%
    margin :auto
    box-shadow :2px 2px 3px #ffe87c
    border-radius :10px
    padding :15px 0 15px 0
    h1
      text-align :center
      font-size :18px
      font-weight :bold
      margin-bottom :10px
    .driver
      display :flex
      .image
        display :inline-block
        width :60px
        height :60px
        img
          width :100%
          height :100%
          border-radius :5px
      .info
        padding :10px
        display :inline-block
        flex :1
        p
          width :67%
          text-overflow :ellipsis
          white-space :nowrap
          display :inline-block
          font-weight :bold
          overflow :hidden
        i
          font-size :10px
          margin-right 8px
        span
          font-size :10px
        h6
          font-size :10px
          margin-top :7px
    .block
      text-align :center
  .seller
    width :95%
    margin :auto
    box-shadow :2px 2px 3px #ffe87c
    border-radius :10px
    padding :15px 0 15px 0
    margin-top :20px
    h1
      text-align :center
      font-size :18px
      font-weight :bold
      margin-bottom :10px
    .shoper
      background-color :#cccccc
      width :100%
      border-radius :20px
      img
        display :inline-block
        width :60px
        height :60px
        vertical-align :middle
      span
        margin-left :20px
        font-size :14px
        font-weight :bold
    .oll
      text-align :center
      margin-top :15px
      .el-rate__icon
        font-size :30px
    .more
      width :95%
      margin :auto
      .score2
        text-align :center
        margin-top :30px
        .flavour
          margin-bottom :20px
      .input-info
        width :100%
        height :300px
        border :1px solid #8c939d
        box-sizing :border-box
        background-color :#e1f3d8
        overflow :hidden
        margin-top :20px
        border-radius :5px
        .comment
          width :99%
          height :80px
          padding-left :5px
          background-color :#e1f3d8
          font-size :16px
          line-height :24px
          outline :none
          border :none
        .input-img
          width :100%
          height :220px
          background-color :#e1f3d8
          position :relative
          .el-upload--picture-card
            width :80px
            height :80px
            line-height :80px
            background-color :#e1f3d8
            margin-top :100px
  .submit
    width :95%
    height :60px
    text-align :center
    line-height :60px
    margin : 20px auto
    border-radius :10px
    color :white

</style>
